﻿
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>母婴商城</title>
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
        <meta content="yes" name="apple-mobile-web-app-capable"/>
        <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
        <meta content="telephone=no" name="format-detection"/>
        <link href="/ui/xianzhi/css/style.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="/ui/xianzhi/js/jquery.min.js"></script>
        <script type="text/javascript" src="/ui/xianzhi/js/slider.js"></script>
        <script type="text/javascript" src="/ui/xianzhi/js/tab.js"></script>
		<script src="dropload.min.js"></script>
		<style>
		  .content{
        max-width: 640px;
        margin: 0 auto;
        background-color: #fff;
    }
		.dropload-up,.dropload-down{
    position: relative;
    height: 0;
    overflow: hidden;
    font-size: 12px;
    /* 开启硬件加速 */
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
}
.dropload-down{
    height: 50px;
}
.dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.dropload-load .loading{
    display: inline-block;
    height: 15px;
    width: 15px;
    border-radius: 100%;
    margin: 6px;
    border: 2px solid #666;
    border-bottom-color: transparent;
    vertical-align: middle;
    -webkit-animation: rotate 0.75s linear infinite;
    animation: rotate 0.75s linear infinite;
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
    .opacity{
        -webkit-animation: opacity 0.3s linear;
        animation: opacity 0.3s linear;
    }
    @-webkit-keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }
    @keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }
		</style>
    </head>
    <body>
        <section class="aui-flexView">
            <header class="aui-navBar aui-navBar-fixed">
                <a href="javascript:;" class="aui-navBar-item">
                    <i class="icon icon-return"></i>
                </a>
                <div class="aui-center">
                    <span class="aui-center-title">母婴商城</span>
                </div>
                <a href="javascript:;" class="aui-navBar-item">
                    <i class="icon icon-share"></i>
                    <i class="icon icon-more"></i>
                </a>
            </header>
			
            <section class="aui-scrollView">
			
		        <div class="aui-ad-bar">
                    <img src="/ui/image/111.png" style="width:100%" alt="">
                </div>
				
                <div class="aui-ad-bar">
                    <img src="/ui/image/111.png" style="width:100%" alt="">
                </div>
				
                <div class="aui-ad-bar">
                    <img src="/ui/image/111.png" style="width:100%" alt="">
                </div>
				
			    <nav class="aui-nav-box">
                    <a href="javascript:;" class="aui-nav-item aui-nav-item-active">推荐</a>
                    <a href="javascript:;" class="aui-nav-item ">最新</a>
                </nav>
  
			      <div class="content">

                    <div class="aui-shop-list aui-shop-list-selected">

                    </div>
					
					
                </div>	
				
            </section>

        </section>
		
		<script>
$(function(){
    // 页数
    var page = 0;
    // 每页展示5个
    var size = 2;

    // dropload
    $('.content').dropload({
        scrollArea : window,
        loadDownFn : function(me){
            page++;
            // 拼接HTML
            var result = '';
            $.ajax({
                type: 'GET',
                url: 'muyingapi.php?page='+page+'&size='+size,
                dataType: 'json',
                success: function(data){
                    var arrLen = data.length;
                    if(arrLen > 0){
                        for(var i=0; i<arrLen; i++){
                            result +=   
							'<a href="/haigou/htspxq.php?fid='+data[i].id+'" class="aui-shop-list-item">'
                            + '<div class="aui-shop-list-item-hd">'
                              + ' <img src='+data[i].img+' alt="">'
                            
                           + '</div>'						
                          + ' <div class="aui-shop-list-item-bd">'
                             + '<h3>'+data[i].chtitle+'</h3>'
                               +' <p class="aui-special-etc">'
                                  +'<span class="aui-special-etc-hd">￥'+data[i].onemoney+'</span>'
                                + '<span class="aui-special-etc-bd">￥898</span>'
                              + '</p>'
                          + '</div>'
                    +  '</a>'
                        }
                    // 如果没有数据
                    }else{
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        // 插入数据到页面，放到最后面
                        $('.aui-shop-list-selected').append(result);
                        // 每次数据插入，必须重置
                        me.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        }
    });
});
</script>

    </body>
</html>
